<template>
	<view class="main">
		<view class="cardWp " v-for="(item,i) in list" :key="i">
			<view class="card">
				<view class="left">
					<view class="imgWp">
						<img v-if="item.head && item.head.length>0" :src="item.head" alt="">
						<u-image v-else src="https://file.casugn.com/storecompcard/temp/avatar_1682582523631.png"
							width="96rpx" height="96rpx" alt=""></u-image>
					</view>
					<view class="info">
						<view class="name">
							{{item.name?item.name:''}}
						</view>
						<view class="title">
							{{item.position?item.position:''}}
						</view>
						<view class="company">
							<text class="u-line-1">{{item.company?item.company:''}}</text>
						</view>
					</view>
				</view>
				<view class="right">
					<view class="btnWp">
						<u-button type="primary" size="mini" plain @click='handleItem(item,index)'>{{btnTitle}}
						</u-button>
					</view>
					<!-- <slot></slot> -->
				</view>

				<view class="isDefault" v-if="item.status==0">
					当前名片
				</view>

			</view>
		</view>
	</view>

</template>

<script>
	export default {
		name: "friendCardList",
		props: {
			list: {
				type: Array,
				default: () => []
			},
			btnTitle: {
				type: String,
				default: '查看好友'
			}
		},
		methods: {
			handleItem(item, index) {
				this.$emit('handleItem', {
					item,
					index
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		background: #f7f8fa;

		.cardWp {
			margin-top: 32rpx;
			border-radius: 8upx;
			height: 204rpx;

			&:first-child {
				margin-top: 0;
			}

			.card {
				position: relative;
				padding: 24upx 32upx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: #FFFFFF;

				.left {
					display: flex;
					align-items: center;

					.imgWp {
						width: 96upx;
						height: 96upx;
						margin-right: 24rpx;
						align-self: flex-start;

						img {
							border-radius: 4rpx;
							width: 100%;
							height: 100%;
						}
					}

					.info {
						.name {
							height: 44rpx;
							font-size: 32rpx;
							font-weight: 600;
							color: #1D2129;
							line-height: 45rpx;

						}

						.title {
							margin-top: 16rpx;
							height: 40rpx;
							font-size: 28rpx;
							font-weight: 400;
							color: #86909C;
							line-height: 39rpx;
						}

						.company {
							margin-top: 16rpx;
							height: 40rpx;
							font-size: 28rpx;
							font-weight: 400;
							color: #86909C;
							line-height: 39rpx;

						}
					}

				}

				.right {
					.btnWp {
						width: 140rpx;
						height: 48rpx;
						background: #E9F0FD;
						border-radius: 4rpx;

					}

					.more {
						width: 100upx;
						height: 100upx;
					}
				}
			}
		}
	}

	.isDefault {
		text-align: center;
		position: absolute;
		right: 0;
		top: 0;
		width: 112rpx;
		height: 40rpx;
		background: #E9F0FD;
		opacity: 1;
		font-size: 24rpx;
		font-weight: 400;
		color: $u-primary;
		line-height: 40rpx;

	}

	.hoverClass {
		box-shadow: 0 0 4rpx #eee;
	}
</style>